import { createApp } from "vue";
import App from "./App.vue";

import pinia from "./stores";
import ElementPlus from "element-plus";
import zhCn from "element-plus/es/locale/lang/zh-cn";
import "element-plus/dist/index.css";
import router from "./router";
import * as ElementPlusIconsVue from "@element-plus/icons-vue";
import "./styles/index.scss";
import "./styles/icons/iconfont.css";
import "./styles/icons/iconfont.js";
import "./mock/center/mock"; //center的Mock
import "./mock/home/index"; //index的Mock
import "@/mock/training/historyMock/index";
import "@/mock/training/fourmock/index";
import NProgress from "nprogress";
// 引入全局路由守卫
import "./permission";
//@ts-ignore
import vue3videoPlay from "vue3-video-play";
import { useCenter } from "@/stores/modules/center";

const app = createApp(App);

import Card from "@/components/card/index.vue";
app.component(Card.name, Card);

import Rank from "@/components/rank/index.vue";
app.component(Rank.name, Rank);

import AddMore from "@/components/addMore/index.vue";
app.component(AddMore.name, AddMore);

app.use(vue3videoPlay);

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component);
}
app.use(pinia)
    .use(router)
    .use(ElementPlus, {
        locale: zhCn,
    })
    .mount("#app");

// x和O的显示与隐藏 - 自定义指令

const centerStore = useCenter();
app.directive("isshow", (el, binding) => {
    // el --> 当前的DOM元素
    // binding.value --> "btn.Trademark.add" 自定义指令绑定的值
    // userInfoStore.userinfo.buttons // 拿到用户信息中的按钮权限数组
    //   if (!userInfoStore.userinfo.buttons.includes(binding.value)) {
    //     el.parentNode?.removeChild(el);
    //   }
    let chooseLise = centerStore.myAvocationList.map((item) => item.id);
    if (!chooseLise.includes(binding.value)) {
        el.parentNode?.removeChild(el);
    }
});
